package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Done
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.AssistChip
import androidx.compose.material3.AssistChipDefaults
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.InputChip
import androidx.compose.material3.InputChipDefaults
import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview
@Composable
fun ChipPagePreview() {
    BasePage({}, "条状标签（Chip）") {
        ChipPage()
    }
}

class ChipPageData {
    companion object : Destination("ChipPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/chip?hl=zh-cn)
 */
@Composable
fun ChipPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("Compose的按钮比View的自由很多，主要定义了背景与点击变化，内容则完全可以自定义")
        NormalSpacer()
        AssistChip(
            {},
            { Text("AssistChip") },
            leadingIcon = {
                Icon(
                    Icons.Filled.Settings,
                    "",
                    Modifier.size(AssistChipDefaults.IconSize)//这些组件有时候会提供一些默认的配置值。。。
                )
            })
        UlItem("AssistChip")
        LabelText("辅助标签，在执行任务期间引导用户。通常显示为临时界面元素，以响应用户输入")

        NormalSpacer()
        val selected = remember { mutableStateOf(true) }
        FilterChip(
            selected.value,
            { selected.value = !selected.value },
            { Text("FilterChip") },
            leadingIcon = if (selected.value) {
                {
                    Icon(
                        Icons.Filled.Done,
                        "",
                        Modifier.size(FilterChipDefaults.IconSize)
                    )
                }
            } else null
        )
        UlItem("FilterChip")
        LabelText("过滤标签，让用户可以从一组选项中优化内容。他们可以带有一个对勾图标。（常用于）")

        NormalSpacer()
        InputChip(
            selected.value,
            { selected.value = !selected.value },
            { Text("InputChip") },
            leadingIcon = {
                Icon(
                    Icons.Filled.Person,
                    "",
                    Modifier.size(InputChipDefaults.AvatarSize)
                )
            },
            trailingIcon = {
                Icon(
                    Icons.Filled.Close,
                    "",
                    Modifier.size(InputChipDefaults.IconSize)
                )
            })
        UlItem("InputChip")
        LabelText("输入标签，表示用户提供的信息，例如菜单中的选择。它们可以包含图标和文本，并提供“X”移除。（常用于邮件群发账号)")

        NormalSpacer()
        SuggestionChip(
            {},
            { Text("SuggestionChip") },
        )
        UlItem("SuggestionChip")
        LabelText("建议标签，根据用户最近使用的应用提供推荐内容。 ")
    }
}